<template>
	<scroll-view class="page" scroll-y="true" @scrolltolower="loadDataFn">
		
		<!-- <view v-if="list.length !== 0" class="page-nav">
			<view class="title">
				综合推荐<text></text>
			</view>
			<view class="btn" @click.stop="openSpecs">
				筛选
				<text class="xzfx_icon_sieve"></text>
			</view>
		</view> -->
		
		<view v-if="list.length !== 0" class="search-condition">
			<item class="item" v-if="searchInfo[item]" v-for="(item,index) in Object.keys(searchInfo)" :key="index">
				{{ searchInfo[item] }}
			</item>
		</view>
		
		<xzfx-empty v-if="list.length === 0" tips="暂无货源" />
		<xzfx-source-goods-list :list="list" style="margin-top: 0;" @success="refreshData" />
		<xzfx-divider v-if="list.length > 10">{{ dividerTitle }}</xzfx-divider>
		
		<view class="suspension-btn xzfx_icon_plus" @click.stop="$checkLogin(toPublish)"></view>
		
		<xzfx-popup ref="popup" v-if="show" @submit="submitSearch" @close="show = false" title="筛选条件">
			<view class="xzfx-specs">
				<view class="specs-block">
					<view class="specs-block-title">车型</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.truckType === item}" v-for="(item,index) in $dict('truckType')" :key="index" @click.stop="selectSpecs('truckType', item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="specs-block">
					<view class="specs-block-title">整车拼车</view>
					<view class="specs-block-list">
						<view :class="{selected: specsInfo.shareStatus === '整车'}" @click.stop="selectSpecs('shareStatus', '整车')">整车</view>
						<view :class="{selected: specsInfo.shareStatus === '拼车'}" @click.stop="selectSpecs('shareStatus', '拼车')">拼车</view>
					</view>
				</view>
			</view>
		</xzfx-popup>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				show: false,
				total: 0,
				list: [],
				pageNo: 1,
				pageSize: 10,
				dividerTitle: "暂无更多",
				searchInfo: {
					truckType: "",
					shareStatus: ""
				},
				specsInfo: {
					truckType: "",
					shareStatus: ""
				}
			};
		},
		onShow() {
			this.refreshData();
			this.userInfo = uni.getStorageSync("userInfo") ? uni.getStorageSync("userInfo").userInfo : null
		},
		onPullDownRefresh(){
			this.refreshData()
		},
		methods: {
			toPublish(){
				if(this.userInfo){
					if(this.userInfo.realStatus === 1){
						this.$go('/pages/source-goods/publish');
					}else{
						this.$go('/pages/authentication/user?type=user');
					}
				}else{
					this.$go('/pages/login');
				}
			},
			refreshData(){
				this.searchInfo = {
					truckType: "",
					shareStatus: ""
				};
				this.pageNo = 1;
				this.pageSize = 10;
				this.total = 0;
				this.list = [];
				this.getDataFn()
			},
			openSpecs(){
				this.specsInfo = JSON.parse(JSON.stringify(this.searchInfo))
				this.show = true
			},
			selectSpecs(key, val){
				if(this.specsInfo[key] === val){
					this.specsInfo[key] = "";
				}else{
					this.specsInfo[key] = val
				}
			},
			submitSearch(){
				this.searchInfo = JSON.parse(JSON.stringify(this.specsInfo));
				this.$refs.popup.closeFn()
			},
			loadDataFn(){
				if(this.total > this.list.length){
					this.pageNo = this.pageNo + 1
					this.getDataFn()
				}else{
					this.dividerTitle = "暂无更多"
				}
			},
			getDataFn(){
				this.dividerTitle = "加载中......"
				this.$utils.system.loading("加载中，请稍后");
				this.$apis.sourceGoods.getList({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					this.dividerTitle = "暂无更多"
					this.total = res.total
					this.list = this.list.concat(res.items)
				}).catch(err => {
					console.log(err)
					this.dividerTitle = "暂无更多";
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.suspension-btn{
		position: fixed;
		right: 20px;
		bottom: 70px;
		z-index: 999;
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50rpx;
		color: #fff;
		background: linear-gradient(45deg, #f43f3b, #ec008c);
		border-radius: 50%;
	}
	.page{
		// background-color: #fff;
		min-height: 100vh;
		
		.page-nav{
			margin: $xzfx-spacing;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				position: relative;
				display: inline-block;
				font-size: 34rpx;
				font-weight: bold;
				color: #333;
				.panel-sub-name{
					font-size: 26rpx;
					font-weight: 500;
					margin-left: 10rpx;
					color: #999999;
				}
			}
			.title::after{
				position: absolute;
				bottom: 0;
				left: 0;
				content: "";
				width: 100%;
				height: 8rpx;
				border-radius: 8rpx;
				background: linear-gradient(90deg, #EA4070 0%, rgba(234,64,112,0.46) 100%);
			}
			.btn{
				height: 60rpx;
				display: inline-flex;
				align-items: center;
				background-color: #fff;
				border-radius: 30rpx;
				color: #666666;
				font-size: 26rpx;
				text{
					color: #999999;
					margin-left: 8rpx;
					font-size: 20rpx;
				}
			}
		}
		.search-condition{
			position: sticky;
			top: 0;
			left: 0;
			z-index: 100;
			width: 100%;
			padding: 0 $xzfx-spacing;
			white-space: nowrap;
			overflow-y: auto;
			.item{
				height: 50rpx;
				display: inline-flex;
				align-items: center;
				background-color: #f1f4fa;
				border-radius: 25rpx;
				padding: 0 20rpx;
				color: #666666;
				font-size: 24rpx;
				margin-right: $xzfx-spacing;
				margin-bottom: $xzfx-spacing;
			}
		}
		
		.xzfx-specs{
			padding: 0 30rpx 40rpx 30rpx;
			.specs-block{
				.specs-block-title{
					font-size: 32rpx;
					font-weight: bold;
					line-height: 100rpx;
					color: #333333;
				}
				.specs-block-list{
					display: grid;
					grid-template-columns: repeat(3,1fr);
					gap: $xzfx-spacing;
					view{
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						border-radius: 30rpx;
						color: #505050;
						border: 1rpx solid #f1f4fa;
						background-color: #f1f4fa;
					}
					.selected{
						color: $xzfx-theme;
						border: 1rpx solid $xzfx-theme;
						background-color: rgba(245, 109, 157, 0.1);
					}
				}
			}
		}
	}
</style>
